<template>
  <div class="hotel-page">
    <!-- 顶部搜索栏 -->
    <div class="hotel-search-bar">
      <el-input v-model="search.key" placeholder="请输入酒店/地标/商圈/地址" class="search-input" />
      <el-button type="primary" @click="onSearch">搜索</el-button>
    </div>
    <!-- 城市选择下拉 -->
    <!-- <div class="city-cascader-row">
      <el-cascader
        v-model="selectedRegion"
        :options="regionOptions"
        placeholder="请选择城市"
        @change="onRegionChange"
        clearable
        :props="{ checkStrictly: true, emitPath: false }"
        style="width: 320px; margin: 18px auto 0 auto; display: block;"
      />
    </div> -->
    <!-- 条件筛选区 -->
    <el-card class="filter-card">
      <div class="filter-row">
        <span class="filter-label">城市：</span>
        <el-select v-model="search.cityName" placeholder="请选择城市" style="width: 200px" @change="onCitySelect">
          <el-option v-for="city in cityList" :key="city" :label="city" :value="city" />
        </el-select>
      </div>
      <div class="filter-row">
        <span class="filter-label">星级：</span>
        <el-radio-group @change="onSearch" v-model="search.starName">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="一钻">1钻</el-radio-button>
          <el-radio-button label="二钻">2钻</el-radio-button>
          <el-radio-button label="三钻">3钻</el-radio-button>
          <el-radio-button label="四钻">4钻</el-radio-button>
          <el-radio-button label="五钻">5钻</el-radio-button>
        </el-radio-group>
      </div>
      <div class="filter-row">
        <span class="filter-label">价格范围:</span>
        <el-input-number v-model="search.minPrice" :min="0" :controls="false" placeholder="最低价"/>
        <span class="price-separator">-</span>
        <el-input-number v-model="search.maxPrice" :min="0" :controls="false" placeholder="最高价"/>
      </div>
    </el-card>
    <!-- 酒店卡片列表 -->
    <div class="hotel-list">
      <el-card v-for="hotel in hotels" :key="hotel.hotelId" class="hotel-card" shadow="hover" @click="goToDetail(hotel)">
        <div class="hotel-card-content">
          <img :src="hotel.pic" class="hotel-img" />
          <div class="hotel-info">
            <div class="hotel-title-row">
              <span class="hotel-title" v-html="hotel.chineseName"></span>
              <el-tag size="small" type="success">{{ hotel.starName }}</el-tag>
              <el-tag size="small" type="warning" v-if="hotel.level">{{ hotel.level }}</el-tag>
            </div>
            <div class="hotel-meta">
              <el-tag size="small" type="info">{{ hotel.cityName }}</el-tag>
              <span v-if="hotel.distance" class="distance">距离您 {{ hotel.distance }} km</span>
            </div>
            <div class="hotel-desc">{{ hotel.address }}</div>
            <div class="hotel-bottom">
              <span class="hotel-score"><i class="el-icon-star-on"></i> {{ hotel.score ? (hotel.score / 10).toFixed(1) : '--' }}/5</span>
              <span class="hotel-price">￥{{ hotel.price }} <span class="qi">起</span></span>
              <el-button type="warning" size="small" class="order-btn">立即预定</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 分页 -->
    <div class="hotel-pagination">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="total"
        v-model:current-page="search.page"
        v-model:page-size="search.size"
        @current-change="onSearch"
      />
    </div>
  </div>
</template>

<script setup>
import {reactive, ref, watch} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

// 搜索参数
let dto = reactive({
  page:1 , size:9 , cityName:'长沙'
})
const router = useRouter()

const search = ref({
  key: '',
  cityName: '',
  starName: '',
  minPrice: null,
  maxPrice: null,
  page: 1,
  size: 10,
  sortBy: '',
})

const hotels = ref([])
const total = ref(0)

function setPriceRange(range) {
  search.value.minPrice = range.min
  search.value.maxPrice = range.max
}

async function onSearch() {
  const dto = { ...search.value }
  console.log('请求参数', dto);
  const res = await axios.post('/Hotel/search', dto)
  const data = res.data.data || []
  console.log('后端返回', data);
  hotels.value = data.map(hotel => ({
    hotelId: hotel.hotelId,
    chineseName: hotel.chineseName,
    address: hotel.address,
    cityName: hotel.cityName,
    starName: hotel.starName,
    level: hotel.level,
    distance: hotel.distanceText,
    score: hotel.score,
    price: hotel.lowestPrice,
    pic: hotel.firstPic || require('@/assets/logo.png'),
  }))
  console.log('映射后hotels', hotels.value);
  total.value = Number(res.data.data?.total || data.length) || 0
  search.value.page = res.data.data?.page || 1
  search.value.size = res.data.data?.pageSize || 10
}

watch(() => [search.value.cityName, search.value.brand, search.value.starName, search.value.minPrice, search.value.maxPrice], onSearch)
watch(() => search.value.page, onSearch)
onSearch()

function goToDetail(hotel) {
  router.push(`/hotel/${hotel.hotelId}`)
}

const cityList = [
  '北京', '上海', '天津', '重庆', '石家庄', '唐山', '秦皇岛', '邯郸', '邢台', '保定', '张家口', '承德', '沧州', '廊坊', '衡水',
  '太原', '大同', '阳泉', '长治', '晋城', '朔州', '晋中', '运城', '忻州', '临汾', '吕梁',
  '呼和浩特', '包头', '乌海', '赤峰', '通辽', '鄂尔多斯', '呼伦贝尔', '巴彦淖尔', '乌兰察布', '兴安盟', '锡林郭勒盟', '阿拉善盟',
  '沈阳', '大连', '鞍山', '抚顺', '本溪', '丹东', '锦州', '营口', '阜新', '辽阳', '盘锦', '铁岭', '朝阳', '葫芦岛',
  '长春', '吉林', '四平', '辽源', '通化', '白山', '松原', '白城', '延边朝鲜族自治州',
  '哈尔滨', '齐齐哈尔', '鸡西', '鹤岗', '双鸭山', '大庆', '伊春', '佳木斯', '七台河', '牡丹江', '黑河', '绥化', '大兴安岭地区',
  '南京', '无锡', '徐州', '常州', '苏州', '南通', '连云港', '淮安', '盐城', '扬州', '镇江', '泰州', '宿迁',
  '杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州', '舟山', '台州', '丽水',
  '合肥', '芜湖', '蚌埠', '淮南', '马鞍山', '淮北', '铜陵', '安庆', '黄山', '滁州', '阜阳', '宿州', '巢湖', '六安', '亳州', '池州', '宣城',
  '福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩', '宁德',
  '南昌', '景德镇', '萍乡', '九江', '新余', '鹰潭', '赣州', '吉安', '宜春', '抚州', '上饶',
  '济南', '青岛', '淄博', '枣庄', '东营', '烟台', '潍坊', '济宁', '泰安', '威海', '日照', '莱芜', '临沂', '德州', '聊城', '滨州', '菏泽',
  '郑州', '开封', '洛阳', '平顶山', '安阳', '鹤壁', '新乡', '焦作', '濮阳', '许昌', '漯河', '三门峡', '南阳', '商丘', '信阳', '周口', '驻马店', '济源',
  '武汉', '黄石', '十堰', '宜昌', '襄阳', '鄂州', '荆门', '孝感', '荆州', '黄冈', '咸宁', '随州', '恩施土家族苗族自治州', '仙桃', '潜江', '天门', '神农架林区',
  '长沙', '株洲', '湘潭', '衡阳', '邵阳', '岳阳', '常德', '张家界', '益阳', '郴州', '永州', '怀化', '娄底', '湘西土家族苗族自治州',
  '广州', '韶关', '深圳', '珠海', '汕头', '佛山', '江门', '湛江', '茂名', '肇庆', '惠州', '梅州', '汕尾', '河源', '阳江', '清远', '东莞', '中山', '潮州', '揭阳', '云浮',
  '南宁', '柳州', '桂林', '梧州', '北海', '防城港', '钦州', '贵港', '玉林', '百色', '贺州', '河池', '来宾', '崇左',
  '海口', '三亚', '三沙', '儋州', '五指山', '琼海', '文昌', '万宁', '东方', '定安县', '屯昌县', '澄迈县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县',
  '重庆',
  '成都', '自贡', '攀枝花', '泸州', '德阳', '绵阳', '广元', '遂宁', '内江', '乐山', '南充', '眉山', '宜宾', '广安', '达州', '雅安', '巴中', '资阳', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州',
  '贵阳', '六盘水', '遵义', '安顺', '铜仁', '黔西南布依族苗族自治州', '黔东南苗族侗族自治州', '黔南布依族苗族自治州',
  '昆明', '曲靖', '玉溪', '保山', '昭通', '丽江', '普洱', '临沧', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州', '大理白族自治州', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州',
  '拉萨', '日喀则', '昌都', '林芝', '山南', '那曲', '阿里',
  '西安', '铜川', '宝鸡', '咸阳', '渭南', '延安', '汉中', '榆林', '安康', '商洛',
  '兰州', '嘉峪关', '金昌', '白银', '天水', '武威', '张掖', '平凉', '酒泉', '庆阳', '定西', '陇南', '临夏回族自治州', '甘南藏族自治州',
  '西宁', '海东', '海北藏族自治州', '黄南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州',
  '银川', '石嘴山', '吴忠', '固原', '中卫',
  '乌鲁木齐', '克拉玛依', '吐鲁番', '哈密', '昌吉回族自治州', '博尔塔拉蒙古自治州', '巴音郭楞蒙古自治州', '阿克苏地区', '克孜勒苏柯尔克孜自治州', '喀什地区', '和田地区', '伊犁哈萨克自治州', '塔城地区', '阿勒泰地区',
  '台北', '高雄', '基隆', '台中', '台南', '新竹', '嘉义',
  '香港', '澳门'
];
const starList = ['二钻', '三钻', '四钻', '五钻']
const priceList = [
  { label: '100元以下', min: 0, max: 100 },
  { label: '100-300元', min: 100, max: 300 },
  { label: '300-600元', min: 300, max: 600 },
  { label: '600-1500元', min: 600, max: 1500 },
  { label: '1500元以上', min: 1500, max: null }
]
function onCitySelect(city) {
  search.value.cityName = city
  search.value.page = 1
  onSearch()
}
function onStarSelect(star) {
  search.value.starName = star
  search.value.page = 1
  onSearch()
}
function onPriceSelect(price) {
  search.value.minPrice = price.min
  search.value.maxPrice = price.max
  search.value.page = 1
  onSearch()
}
</script>

<style scoped>
.hotel-page {
  background: linear-gradient(135deg, #f7f8fa 60%, #e6f0fa 100%);
  min-height: 100vh;
  padding: 0 0 40px 0;
}
.hotel-search-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32px 0 18px 0;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 4px 24px rgba(80,120,255,0.08);
  padding: 18px 32px;
}
.search-input {
  width: 320px;
  margin-right: 18px;
  border-radius: 24px;
  font-size: 18px;
  height: 44px;
  border: 1.5px solid #e6eaf2;
  background: #fafdff;
}
.el-button[type="primary"] {
  border-radius: 22px;
  font-size: 18px;
  height: 44px;
  padding: 0 32px;
  background: linear-gradient(90deg, #4f8cff 60%, #6ed0fa 100%);
  border: none;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(80,140,255,0.10);
  transition: background 0.2s;
}
.el-button[type="primary"]:hover {
  background: linear-gradient(90deg, #3576f6 60%, #4fd0fa 100%);
}
.filter-card {
  max-width: 900px;
  margin: 0 auto 24px auto;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(80,120,255,0.06);
  padding: 20px 32px 10px 32px;
  background: #fafdff;
  border: 1.5px solid #e6eaf2;
}
.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}
.filter-label {
  width: 54px;
  color: #6b7a99;
  font-size: 16px;
  font-weight: bold;
}
.el-select {
  min-width: 180px;
  border-radius: 16px !important;
  background: #fff;
  box-shadow: 0 2px 8px rgba(80,140,255,0.04);
}
.el-select .el-input__wrapper {
  border-radius: 16px !important;
  background: #fafdff;
  border: 1.5px solid #e6eaf2;
  font-size: 16px;
}
.el-select-dropdown__item {
  border-radius: 8px;
  margin: 2px 0;
}
.el-select-dropdown__item.selected,
.el-select-dropdown__item:hover {
  background: #e6f0fa !important;
  color: #3576f6 !important;
}
.hotel-list {
  max-width: 900px;
  margin: 0 auto;
}
.hotel-card {
  margin-bottom: 22px;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(80,120,255,0.08);
  transition: transform 0.18s cubic-bezier(.4,2,.6,1), box-shadow 0.18s;
  cursor: pointer;
  border: none;
  background: #fff;
}
.hotel-card:hover {
  transform: scale(1.025);
  box-shadow: 0 12px 36px rgba(80,140,255,0.16);
}
.hotel-card-content {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 18px 0 12px 0;
}
.hotel-img {
  width: 170px;
  height: 120px;
  object-fit: cover;
  border-radius: 16px;
  margin-right: 0;
  box-shadow: 0 2px 12px rgba(80,140,255,0.06);
  background: #f5f8ff;
}
.hotel-info {
  flex: 1;
  min-width: 0;
}
.hotel-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 21px;
  font-weight: bold;
  margin-bottom: 8px;
}
.hotel-title {
  font-size: 21px;
  font-weight: bold;
  color: #222;
  line-height: 1.2;
}
.hotel-title em, .hotel-title span[style*="color:red"] {
  color: #4f8cff;
  font-style: normal;
  font-weight: bold;
  background: #e6f0fa;
  padding: 0 2px;
  border-radius: 2px;
}
.el-tag[type="info"] {
  background: #e6f7ff;
  color: #1890ff;
  border: none;
  font-size: 13px;
  font-weight: bold;
  padding: 0 8px;
  border-radius: 7px;
}
.el-tag[type="success"] {
  background: #f6ffed;
  color: #52c41a;
  border: none;
  font-size: 13px;
  font-weight: bold;
  padding: 0 8px;
  border-radius: 7px;
}
.el-tag[type="warning"] {
  background: #fffbe6;
  color: #faad14;
  border: none;
  font-size: 13px;
  font-weight: bold;
  padding: 0 8px;
  border-radius: 7px;
}
.hotel-meta {
  color: #888;
  font-size: 14px;
  margin-bottom: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.hotel-meta .distance {
  color: #4f8cff;
  font-size: 13px;
  margin-left: 8px;
}
.hotel-desc {
  color: #666;
  font-size: 15px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.hotel-bottom {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 8px;
}
.hotel-score {
  color: #1890ff;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 2px;
}
.hotel-score i {
  color: #faad14;
  font-size: 18px;
}
.hotel-price {
  color: #fa541c;
  font-size: 22px;
  font-weight: bold;
}
.hotel-price .qi {
  font-size: 14px;
  color: #888;
  margin-left: 2px;
}
.order-btn {
  border-radius: 16px;
  font-size: 15px;
  font-weight: bold;
  padding: 0 18px;
  background: linear-gradient(90deg, #faad14 60%, #fa541c 100%);
  border: none;
  color: #fff;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(250,84,28,0.10);
}
.order-btn:hover {
  background: linear-gradient(90deg, #fa541c 60%, #faad14 100%);
}
.hotel-pagination {
  max-width: 900px;
  margin: 32px auto 0 auto;
  display: flex;
  justify-content: center;
}
@media (max-width: 1000px) {
  .hotel-list, .filter-card, .hotel-pagination, .hotel-search-bar {
    max-width: 98vw;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .hotel-img {
    width: 120px;
    height: 90px;
  }
}
@media (max-width: 600px) {
  .hotel-list, .filter-card, .hotel-pagination, .hotel-search-bar {
    max-width: 100vw;
    padding-left: 0;
    padding-right: 0;
  }
  .hotel-card-content {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hotel-img {
    width: 100%;
    height: 140px;
    margin-bottom: 8px;
  }
  .hotel-search-bar {
    flex-direction: column;
    gap: 10px;
    padding: 12px 8px;
  }
  .filter-card {
    padding: 12px 8px 6px 8px;
  }
}
</style>